<template>
    <view class="content">
		<view class="tab-list">
			<view class="tab-item" v-for="(item, index) in tabName"  @tap="changeTab(index)" :class="{ active : index === activeIndex}">
				{{item}}
			</view>
		</view>
		
		<view class="tab-content">
			<!-- 视频教程 -->
			<template v-if="activeIndex === 0">
				<video class="video" autoplay controls @play="finishLoader" src="https://onecode-zfx-one.oss-cn-shenzhen.aliyuncs.com/20200820/b20fb860-e2c9-11ea-b47a-3d788f4e7b0e.mp4"></video>
				<view class="loading" v-if="loading">
					<view class="load-item pink"></view>
					<view class="load-item red"></view>
					<view class="load-item orange"></view>
					<view class="load-item yellow"></view>
				</view>
			</template>  
			<template v-if="activeIndex === 1">
				<image class="course" mode="widthFix" src="https://onecode-zfx-one.oss-cn-shenzhen.aliyuncs.com/20200812/4489f7b0-dc48-11ea-b643-1f8823af6cac.png"></image>
			</template>
		</view>
	</view>
</template>

<script>
    export default {
        name: "course",
		data() {
			return {
				activeIndex: 0, 
				tabName:['视频教程','玩法指南'],
				loading: true
			}
			
		},
		methods:{
			// 切换tab栏
			changeTab(index) {
				this.activeIndex = index;
				this.loading = true;
			},
			// 视频加载完成
			finishLoader() {
				this.loading = false;
			}
		}
    }
</script>

<style lang="scss" scoped>
.content {
	height: 100vh;
	width: 100%;
	background: #EFF0F1;
	@include flexBox(null, null, column);
	.tab-list{
		width: 710rpx;
		height: 130rpx;
		margin: 0 auto;
		@include flexBox(center, flex-end);
		.tab-item{
			width: 375rpx;
			height: 95rpx;
			font-size: 35rpx;
			background: #E3E3E3;
			border-radius: 16rpx 16rpx 0 0;
			transition: 0.2s;
			font-size: 32rpx;
			color: #8E8E8E;
			@include flexBox(center, center);
			&.active{
				background: #fff;
				height: 106rpx;
				color: #585858;
			}
			
		}
	}
	.tab-content{
		width: 710rpx;
		margin: 0 auto;
		flex: 1;
		overflow-y: auto;
		background: #fff;
		margin-bottom: 20rpx;
		position: relative;
		@include flexBox(center, center);
		.video {
			width: 100%;
			height: 100%;
		}
		.course {
			width: 100%;
			position: absolute;
			top: 0;
		}
		.loading {
			position: absolute;
			width: 100%;
			height: 100%;
			@include flexBox(center);
			.load-item {
				width: 20rpx;
				height: 100rpx;
				margin: 0 10rpx;
				border-radius: 50rpx;
				&.pink {
					background: #fb889b;
					animation: pink 0.8s infinite;
				}
				&.red {
					background: #fb8888;
					animation: red 0.8s infinite;
				}
				&.orange {
					background: #fba488;
					animation: orange 0.8s infinite;
				}
				&.yellow {
					background: #fbc188;
					animation: yellow 0.8s infinite;
				}
			}
		}
	}
}
@keyframes pink {
	0% {
		margin-top: -16rpx;
	}

	50% {
		margin-top: 16rpx;
	}

	100% {
		margin-top: -16rpx;
	}
}
@keyframes red {
	0% {
		margin-top: 16rpx;
	}

	50% {
		margin-top: -16rpx;
	}

	100% {
		margin-top: 16rpx;
	}
}
@keyframes orange {
	0% {
		margin-top: -16rpx;
	}

	50% {
		margin-top: 16rpx;
	}

	100% {
		margin-top: -16rpx;
	}
}
@keyframes yellow {
	0% {
		margin-top: 16rpx;
	}

	50% {
		margin-top: -16rpx;
	}

	100% {
		margin-top: 16rpx;
	}
}
</style>
